<template>
    <div>
        <two-ceil flag="6"></two-ceil>
        <two-Sort catsId='5' @bigSort="bigSortChange" @miniSort="miniSortChange" @styleSort="styleSortChange" :activeClass="{bigClass:this.$route.params.id,miniClass:this.$route.params.itemChild}"  modeName="预算方案" :searchText="this.$route.params.searchText"></two-Sort>
        <div class="wrap">
            <loading v-if="loadingShow" loadingStyle="height:500px;"></loading>
            <concept-list v-else :length="modeListLength" toUrl="modeInfoBudget" :indexMsg="indexMsg" modeType="5"></concept-list>
        </div>
        <page :pageItem="pageMsg" @pageChange="getMsg"></page>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading';
export default {
    name:"budget",//预算
    data(){
        return {
            loadingShow:true,
            modeListLength : '',//显示模块数量
            bigNum : 0,//大类分类默认
            miniNum : 0,//小类分类默认
            styleNum : 0,//风格分类默认
            pageMsg:{
                "meta": {
                    "current_page": 1,
                    "from": 1,
                    "last_page": 1,
                    "path": "http://192.168.1.162/api/cat/6/0/0/0/getitems",
                    "per_page": 16,
                    "to": 9,
                    "total": 9
                }
            },//翻页数据
            indexMsg : {
                    "items": {
                        "1": [
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            },
                            {
                                "id": '',
                                "title": "",
                                "image": ""
                            }
                        ]
                    }
            }
        }
    },
    components:{
        loading,
        twoCeil : resolve => require(["../twoCeil"], resolve),//二级吊顶
        twoSort : resolve => require(["../twoSort"], resolve),//二级分类
        conceptList : resolve => require(["../conceptList"], resolve),//概念方案列表
        page :　resolve => require(["../page"], resolve)//翻页
    },
    methods:{
        sortSearchClick(n){//同页面搜索
            var n = n||0;
            axios.get('/cat/5/0/0/0/0/'+n+'/getitems').then(response => {
                this.indexMsg = response.data.data;
                this.modeListLength = response.data.meta.to;//显示模块数量
                this.pageMsg = response.data;//翻页数据
            });
        },
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","getItemHome"]
        ),
        getMsg(value){
            axios.get('/cat/5/'+this.bigNum+'/'+this.miniNum+'/'+this.styleNum+'/0/0/getitems?'+'page='+value).then(response => {
                this.indexMsg = response.data.data;
                this.modeListLength = response.data.meta.to;//显示模块数量
            })
        },
        bigSortChange(index){//大类发生改变时
            this.bigNum = index;
            this.sortChange();
        },
        miniSortChange(index){//小类发生改变时
            this.miniNum = index;
            this.sortChange();
        },
        styleSortChange(index){//风格发生改变时
            this.styleNum = index;
            this.sortChange();
        },
        sortChange(){//分类风格发生改变时重新请求数据
            axios.get('/cat/5/'+this.bigNum+'/'+this.miniNum+'/'+this.styleNum+'/0/0/getitems').then(response => {
                this.indexMsg = response.data.data;//传递的模块数据
                this.modeListLength = response.data.meta.to;//显示模块数量
                this.pageMsg = response.data;//翻页数据
                this.loadingShow = false;
            })
        }
    },
    computed:{
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    created (){
        if(this.$route.params.searchText){
            axios.get('/cat/5/0/0/0/0/'+this.$route.params.searchText+'/getitems').then(response => {
                this.indexMsg = response.data.data;
                this.modeListLength = response.data.meta.to;//显示模块数量
                this.pageMsg = response.data;//翻页数据
                this.loadingShow = false;
            });
        }else{
            axios.get('/cat/5/0/0/0/0/0/getitems').then(response => {
                this.indexMsg = response.data.data;
                this.modeListLength = response.data.meta.to;//显示模块数量
                this.pageMsg = response.data;//翻页数据
                this.loadingShow = false;
            });
        }
    },

}
</script>